<template>
    <div class="body-background-style" v-bind:style="{height:clientHeight}">
        <div class="row top-row">
            <div  class="item-list">
                <div class="margin-top">
                </div>
                <div class="item">
                    <div class="item-list-lable item-width">
                        活动类型:
                    </div>
                    <div class="item-list-menage">
                        <select class="input-style" v-model="menage.type">
                            <option v-for="item in types" v-bind:value="item.id">{{item.name}}</option>
                        </select>
                     </div>
                </div>
                <div class="item">
                    <div class="item-list-lable">
                        活动名称:
                    </div>
                    <div class="item-list-menage">
                        <input class="input-style" type="text" v-model="menage.name"/>
                    </div>
                </div>
                <div class="item">
                    <div class="item-list-lable">
                        活动地址:
                    </div>
                    <div class="item-list-menage">
                        <input class="input-style" type="text" v-model="menage.city"/>

                    </div>
                </div>
                <div class="item">
                    <div class="item-list-lable">
                        活动日期:
                    </div>
                    <div class="item-list-menage">
                        <input type="date" v-model="menage.datatime" class="input-style"/>
                        <!--<div class="data-time-left">-->
                            <!---->
                            <!--&lt;!&ndash;<mt-datetime-picker&ndash;&gt;-->
                                    <!--&lt;!&ndash;ref="picker"&ndash;&gt;-->
                                    <!--&lt;!&ndash;type="time"&ndash;&gt;-->
                                    <!--&lt;!&ndash;v-model="menage.datatime">&ndash;&gt;-->
                            <!--&lt;!&ndash;</mt-datetime-picker>&ndash;&gt;-->
                        <!--</div>-->
                        <!--<div class="data-time-right">-->
                           <!--<img src="../assets/images/time.png" style="width: 100%;height: 100%"/>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>

            <div  class="item-list">
                <div class="margin-top">
                </div>
                <div class="item">
                    <div class="item-list-lable">
                        总负责人:
                    </div>
                    <div class="item-list-menage">
                        <input class="input-style" type="text" v-model="menage.username"/>
                    </div>
                </div>
                <div class="item">
                    <div class="item-list-lable">
                        总参与数:
                    </div>
                    <div class="item-list-menage">
                        <input class="input-style" type="text" v-model="menage.nums"/>
                    </div>
                </div>
                <div class="item">
                    <div class="item-list-lable">
                        支部成员:
                    </div>
                    <div class="item-list-menage">
                        <select class="input-style">
                           <option v-for="name in menage.userlist" v-bind:value="name">{{name}}</option>
                        </select>
                    </div>
                </div>
            </div>

            <div  class="item-list ">
                <div class="margin-top  margin-top-image">
                    上传照片
                </div>
                <div class="item image-item" style="flex-wrap: wrap;">
                    <div class="item-image">
                        <img  style="width: 70px;height: 70px"  src="../assets/images/date-time.png"/>
                    </div>
                    <div class="item-image" v-for="pic in menage.images">
                        <img  style="width: 70px;height: 70px"  v-bind:src="pic" />
                        <!--// ../assets/images/date-time.png-->
                    </div>
                </div>
            </div>

            <div  class="item-list ">
                <div class="margin-top  margin-top-image">
                    活动详情
                </div>
                <div class="item item-text">
                    <textarea class="input-style" cols="3" rows="5" v-model="menage.menage">
                          </textarea>
                  </div>
                <div class="margin-bottom-menage">
                    <div @click="add(1)" class="login-botton-style login-botton-style-click">
                        <a >保存</a>
                    </div>
                    <div @click="add(2)" style="    margin-left: 20px;" class="login-botton-style ">
                        <a 　>取消</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import appheader from '../components/appheader';
    import { Toast,DatetimePicker } from 'mint-ui';
    Vue.component(DatetimePicker.name, DatetimePicker);
    export default {
        data () {
            return {
                clientHeight: '600px',
                cmdtype:0,
                types:[
                    {'id':"1",'name':'公益活动'},
                    {'id':"2",'name':'纪念活动'},
                    {'id':"3",'name':'外出活动'},
                ],
                menage:{
                type:"",
                name:"",
                city:"",
                datatime:"",
                username:"",
                nums:1,
                userlist:[],
                images:[]
               }
            }
        },
        created:function(){
              var id=this.$route.params['id'];
              if(id){
                  this.menage={
                      type:"外出",
                      name:"追寻红色记忆",
                      city:"上海淞沪抗战纪念馆",
                      datatime:"2017-08-03",
                      username:"张毅",
                      nums:12,
                      userlist:[
                          "王毅","张婕","杨云海"
                      ],
                      images:[
                          "http://img4.imgtn.bdimg.com/it/u=3822933508,873438676&fm=26&gp=0.jpg",
                          "http://img2.imgtn.bdimg.com/it/u=1036989181,504777199&fm=200&gp=0.jpg",
                          "http://img4.imgtn.bdimg.com/it/u=3822933508,873438676&fm=26&gp=0.jpg"
                      ],
                      menage:"白洋淀雁翎队纪念馆 广东东江纵队纪念馆 旅顺日俄监狱旧址 侵华日军南京大屠杀遇难同胞纪念馆 上海淞沪抗战纪念馆 伪满皇宫博物院 西安事变纪念馆 周恩来邓颖超纪念馆 重"
                   }
              }
        },
        methods: {
            openPicker() {
                this.$refs.picker.open();
            },
            add:function (type) {
                var menage="";
                if(type=='1'){
                    menage="修改成功";
                }else{
                    menage="操作成功";
                }
                let alert=Toast({
                    message: menage,
                    iconClass: 'icon icon-success'
                });
                setTimeout(()=>{
                    alert.close();
                    this.$router.push({name:'jifen',params:{
                        id:this.$route.params['id']
                    }})
                },1000)
            }
        },
        mounted() {
            this.clientHeight = `${document.documentElement.clientHeight}px`;
            // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
            const that = this;
            window.onresize = function temp() {
                that.clientHeight = `${document.documentElement.clientHeight}px`;
            };
        },
        components: {
            'appheader':appheader,
            'Toast':Toast,
            'vue-datetime-picker':'vueDatetimePicker'
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    div{
        color: #000;
    }
    .col-md-12{
        width: 100%;
    }
    .top-row{
    }
    .input-style{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
        border: 0;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        outline: 0;
        line-height: 1.6;
        width: 100%;
        border: none;
        background-color: #ffffff;
        font-size: 15px;

    }

    .item-list{
        width: 100%;
        .margin-top{
            background-color: #ebebeb;
            height: 22px;
        }
        .item{
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 14px;
            /*margin-left: 14px;*/
            display: flex;
            flex-direction: row;
            border-bottom: 1px solid #ebebeb;
            opacity: 0.7;
            .item-list-lable{
                width:25%;
            }
            .item-list-menage{
                /*padding-left: 14px;*/
                width: 75%;
                height:100%;
                text-align: left;
                .data-time-left{
                    width: 100%;
                    height:100%;
                }
                .data-time-right{
                    width: 25%;
                    height:100%;

                }
            }
            .item-image{
                width: 32%;
                margin-top: 10px;
                margin-bottom: 2px;
            }
        }
        .margin-top-image{
            padding-left: 20px;
            padding-top: 3px;
            padding-bottom: 4px;
        }
        .image-item{
            border-bottom: none !important;
        }
        .item-text{
            /*margin-left: 4px;*/
            padding-right: 15px;
        }
        .margin-bottom-menage{
            padding-top: 23px;
            background-color: #ebebeb;
            height: 64px;
            line-height: 64px;
            align-items: center;
            justify-content: center;
            display: flex;
            text-align: center;
            font-size: 12px;
        }
    }
    .login-botton-style{
        -webkit-justify-content: flex-start;
        -webkit-align-items:flex-start;
        line-height: 38px;
        height: 38px;
        border-radius: 20px;
        width: 126px;
        /*margin-left: 20px;*/
        color: #e9b150;
        border: 2px #e9b150 solid;

    }
    .login-botton-style-click{
        color: #ffffff;
        background-color: #e9b150 ;
    }
    .a-style{
        color: #e9b150;
    }
    .body-background-style{
        width:100%;
        /*height: 100%;*/
        /*overflow-y: hidden;*/
        overflow-x: hidden;
        /*overflow-wrap: break-word;*/
        background:url("");


    }
    .item-width{
        height: 25px;
        line-height: 25px;
    }

    select {
        /*美化样式*/
        display: block;
        width: 100%;
        padding: 0px;
        font-size: 1rem;
        color: #000;
        border: none;
        background-color: #fff;
        background-image: none;
        height: 25px;
        line-height: 25px;
        /*Chrome和Firefox里面的边框是不一样的，
        所以复写了一下*/
        /*很关键：将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        /*在选择框的最右侧中间显示小箭头图片
          换成自己适合的图片
        */
        background:url("../assets/images/select6.png")
        no-repeat scroll 95% 55% #fff;
        margin-right: 10px;
    }
    /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
    select::-ms-expand { display: none; }
</style>